import React, { PureComponent, Suspense } from 'react';
// import ReactDOM from 'react-dom';
import { Layout } from 'antd';
// import classNames from 'classnames';
// import { Link }  from 'umi';
// import styles from './index.less';
import pageTabUtil from '@/utils/pageTabUtil';
import BizIcon from '@/components/BizIcon';
import PageLoading from '../PageLoading';
import { getDefaultCollapsedSubMenus } from './SiderMenuUtils';

const BaseMenu = React.lazy(() => import('./BaseMenu'));
const { Sider } = Layout;

export default class LeftSideMenu extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            openKeys: getDefaultCollapsedSubMenus(props)
        };
    }

    static getDerivedStateFromProps(props, state) {
        const { pathname } = state;
        if (props.location.pathname !== pathname) {
            // 处理左侧菜单的展开
            const currentPath = pageTabUtil.getCurrentKey();
            const {
                location: { pathname: originPathname }
            } = props;
            return {
                pathname: props.location.pathname,
                openKeys: getDefaultCollapsedSubMenus({
                    ...props,
                    location: { pathname: currentPath || originPathname }
                })
            };
        }
        return null;
    }

    isMainMenu = key => {
        const { menuData } = this.props;
        return menuData.some(item => {
            if (key) {
                return item.key === key || item.path === key;
            }
            return false;
        });
    };

    handleOpenChange = openKeys => {
        const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
        this.setState({
            openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys]
        });
    };

    render() {
        const { collapsed, onCollapse, theme, dispatch } = this.props;
        const { openKeys } = this.state;
        const defaultProps = collapsed ? {} : { openKeys };

        // const siderClassName = classNames(styles.sider, {
        //     [styles.fixSiderbar]: fixSiderbar,
        //     [styles.light]: theme === 'light'
        // });

        const menuCollapse = (
            <div
                title={collapsed ? '展开侧边栏' : '收起侧边栏'}
                style={{
                    width: collapsed ? 80 : 200,
                    cursor: 'pointer',
                    height: 60,
                    lineHeight: '60px',
                    fontSize: 14,
                    borderTop: '1px solid rgba(229,229,229,1)',
                    borderRight: '1px solid rgba(229,229,229,1)',
                    transition: 'width 0.2s',
                    textAlign: collapsed ? 'center' : 'left'
                }}
                // className={styles.toggleBtn}
                onClick={() => {
                    dispatch({
                        type: 'global/changeLayoutCollapsed',
                        payload: !collapsed
                    });
                }}
            >
                <BizIcon
                    style={{
                        margin: collapsed ? '0' : '0 10px 0 24px'
                    }}
                    type={collapsed ? 'oa_top_but_open_default' : 'oa_top_but_retract_default'}
                />
                {!collapsed && <span>收起侧边栏</span>}
            </div>
        );
        return (
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                breakpoint="lg"
                onCollapse={onCollapse}
                // width={256}
                theme={theme}
                style={{
                    position: 'relative',
                    background: '#fff',
                    zIndex: 500
                }}
                id="left-side"
            >
                <Suspense fallback={<PageLoading />}>
                    <BaseMenu
                        {...this.props}
                        mode="inline"
                        handleOpenChange={this.handleOpenChange}
                        onOpenChange={this.handleOpenChange}
                        style={{
                            padding: '16px 0',
                            flex: 1,
                            overflowY: 'auto',
                            overflowX: 'hidden'
                        }}
                        {...defaultProps}
                    />
                    {menuCollapse}
                </Suspense>
            </Sider>
        );
    }
}
